page{
  width: 100%;
  min-height: 100%;
  background: #F6F6F6;
  .coupon-recv-popup-class {
    .custom-ani-class {
      width: 100%;
      max-width: 100%;
      margin: 0 auto
    }
    .wux-popup__content {
      border-radius: 0rpx;
      background-color: transparent;
    }
  }
}
.index-wrapper{
  background-color: #f6f6f6;
  & .load-view-box {
    width: 100%;
    height: 100vh;
  }
  /* 搜索框 */
  .search {
    background: #fff;
    z-index: 1000;
    // width: 100%;
    height: 110rpx;
    padding: 20rpx 0;
    .search-input {
      height: 70rpx;
      line-height: 64rpx;
      margin: 0 auto;
      width: 710rpx;
      border-radius: 8rpx;
      border: 1px solid #FF2424;
      padding: 0 18rpx;
      font-size: 28rpx;
      color: #B2B2B2;
      .icon-sousuo {
        color: #FF2424;
        font-size: 40rpx;
        margin-right: 15rpx;
        vertical-align: middle;

      }
    }
  }
  // 自动吸顶
  .stickyClass{
    position: sticky;
    top: 0 //当menu元素距离可视窗口顶部<0时，menu由static定位切换为fixed定位
  }
  /* 共用的 swiper 样式 */
  & .swiper-cont{
    height: 300rpx;
    & .swiper{
      height: 100%;
    }
    & .slide-image-box {
      width:100%;
      height: 100%;
    }
    & .slide-image{
      width: 100%;
      height: 100%;
    }
  }
  /* 金刚区 */
  .menu-area {
    display: flex;
    justify-content: space-around;
    background: #fff;
    padding: 30rpx;
    .menu-item {
      text-align: center;
      .menu-item-pic {
        width: 88rpx;
        height: 88rpx;
        border-radius: 50%;
      }
      .menu-item-title {
        margin-top: 5rpx;
        font-size: 26rpx;
        color: #666666;
      }
    }
  }
  /* 拔草活动专区 */
  .activity-area {
    background: #fff;
    width: 710rpx;
    margin: 10rpx auto;
    border-radius: 8rpx;
    .activity-title {
      padding: 20rpx 0 10rpx 20rpx;
      color: #FF2424;
      font-size: 28rpx;
    }
    .activity-option {
      background: #f6f6f6;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      .activity-item {
        background: #fff;
        margin-bottom: 1rpx;
        // margin-right: 1rpx;
        padding: 11rpx 27rpx;
        width: 354rpx;
        display: flex;
        justify-content: space-between;
        .item-text {
          .item-name {
            font-size: 30rpx;
            color: #333333;
          }
          .item-describe {
            font-size: 24rpx;
            margin-top: 8rpx;
            color: #FF6A00;
          }
        }
        .item-pic {
          width: 115rpx;
          height: 115rpx;
        }
      }
    }
  }
  /* 共用的商品列表样式 */
  & .goods-list{
    margin-top: 10rpx;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    & .goods-item-parent {
      background: transparent;
      padding: 0 5rpx 0 20rpx;
      width: 50%;
      margin-bottom: 10rpx;
      &:nth-child(2n) {
        padding: 0 20rpx 0 5rpx;
      }
      & .goods-item{
        background: #fff;
        width: 100%;
        border-radius: 8rpx;
        & .goods-link-area{
          width: 100%;
          display: block;
          & .item-img-cont{
            width:100%;
            height:0;
            overflow:hidden;
            padding-bottom:100%;
            &>image{
              width: 100%;
              height: 100%;
            }
          }
          & .item-info{
            margin: 15rpx;
            line-height: 42rpx;
            font-size: 30rpx;
            color: #333;
            height: 84rpx;
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
          }
        }
        & .item-price-cont{
          display: flex;
          padding: 0 15rpx 20rpx;
          align-items: flex-end;
          & .price-current{
            color: #FF2424;
            font-size: 40rpx;
            line-height: 40rpx;
            display: flex;
            & .price-icon{
              font-size: 28rpx;
              margin-right: 8rpx;
            }
          }
          .under-baseline {
            align-items: baseline;
          }
          & .price-old{
            margin-left: 15rpx;
            font-size: 26rpx;
            color: #D0D0D0;
            text-decoration: line-through;
            display: flex;
            align-items: flex-end;
          }
        }
        & .item-price-cont-owner {
          justify-content: space-between;
          & .price-current{
            flex: 1;
          }
        }
        & .commission {
          padding: 0 20rpx 30rpx;
          font-size: 28rpx;
          color: #666;
        }
      }
    }
  }
  /* 分割线相关样式 */
  & .divider-box {
    display: flex;
    & .loading-data-icon {
      width: 36rpx;
      height: 36rpx;
      margin-right: 20rpx;
      background: url() no-repeat center;
      background-size: 36rpx 36rpx;
    }
    & .load-tips{
      font-size: 28rpx;
      color: #666;
      text-align: center;
    }
  }
  & .divider {
    width: 100%;
    padding: 10rpx;
    display: flex;
    justify-content: center;
    & .load-tips{
      font-size: 28rpx;
      color: #666;
      text-align: center;
    }
  }
  /* 商城首页样式 */
  .index-cont {
    /* 重置 swiper 样式 */
    & .swiper {
      .wx-swiper-dot {
        width: 10rpx;
        height: 10rpx;
        border-radius: 5rpx;
      }
      .wx-swiper-dot-active {
        width: 36rpx;
      }
    }
  }
  /* 达人店首页样式 */
  .talent-cont {
    /* 重置 swiper 样式 */
    & .swiper {
      .wx-swiper-dot {
        width: 10rpx;
        height: 10rpx;
        border-radius: 5rpx;
      }
      .wx-swiper-dot-active {
        width: 36rpx;
        background-color: #fff;
      }
    }
    /* 店主信息 */
    & .shop-owner-info {
      width: 100%;
      height: 110rpx;
      padding: 19rpx 0 19rpx 20rpx;
      display: flex;
      background: url() no-repeat right top;
      background-color: #fef5f5;
      background-size: cover;
      & .shop-owner-avatar {
        width: 72rpx;
        height: 72rpx;
        border-radius: 50%;
        overflow: hidden;
        margin-right: 24rpx;
        & image {
          width: 100%;
          height: 100%;
        }
      }
      & .shop-owner-name {
        flex: 1;
        font-size: 32rpx;
        line-height: 72rpx;
        font-weight: bold;
        color: #333;
      }
      & .share-box {
        padding: 0 30rpx;
        & .share-item {
          width: 100%;
          padding: 30rpx 0;
          & button {
            width:100%;
            padding: 0;
            display: flex;
            background: transparent;
            line-height: normal;
            border-radius: none;
            overflow: visible;
            &:after {
              display: none;
            }
          }
          & .share-item-img {
            width: 40rpx;
            height: 40rpx;
            overflow: hidden;
            margin-right: 20rpx;
            & image {
              width:100%;
              height:100%;
            }
          }
          & .share-item-text {
            font-size: 28rpx;
            color: #666;
            line-height: 40rpx;
          }
        }
      }
      & .share-btn {
        display: flex;
        width: 125rpx;
        height: 60rpx;
        align-self: center;
        border-radius: 30rpx 0 0 30rpx;
        line-height: 60rpx;
        padding-right: 10rpx;
        padding-left: 0;
        font-size: 28rpx;
        justify-content: flex-end;
        color: #fff;
        background: -webkit-linear-gradient(left, #f24d94 , #f1282c);
        & .iconfont {
          font-size: 36rpx;
          margin-right: 10rpx;
        }
      }
    }
    /* 店主强推 */
    & .shop-owner-recommend {
      width: 100%;
      padding: 30rpx 20rpx;
      background-color: #fff;
      & .recommend-goods-info-list {
        width: 100%;
        display: flex;
        flex-direction: column;
      }
      & .recommend-goods-info {
        width: 100%;
        display: flex;
        margin-bottom: 20rpx;
        &:last-child {
          margin-bottom: 0;
        }
        & .goods-img {
          flex-shrink: 0;
          width: 160rpx;
          height: 160rpx;
          & image {
            width: 100%;
            height: 100%;
          }
        }
        & .goods-desc {
          width: 100%;
          display: flex;
          padding-left: 40rpx;
          flex-direction: column;
          justify-content: space-between;
          overflow: hidden;
          & .goods-name {
            font-size: 30rpx;
            line-height: 1.5;
            font-weight: bold;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: #333;
          }
          & .goods-btm {
            width: 100%;
            display: flex;
            justify-content: space-between;
            & .price-box {
              flex: 1;
              display: flex;
              align-items: flex-end;
              & .current-price {
                color: #FF2424;
                font-size: 36rpx;
                margin-right: 21rpx;
              }
              & .old-price {
                color: #D0D0D0;
                font-size: 28rpx;
                text-decoration: line-through;
              }
            }
            & .buy-btn {
              padding: 0 20rpx;
              height: 60rpx;
              line-height: 60rpx;
              border-radius: 6rpx;
              font-size: 30rpx;
              text-align: center;
              color: #fff;
              background: -webkit-linear-gradient(left, #f24d94 , #f1282c);
            }
          }
          & .commission {
            font-size: 28rpx;
            color: #666;
          }
        }
      }
    }
    /* 商品卡片中分享的小图标 */
    & .share-icon {
      width: 36rpx;
      height: 50rpx;
      line-height: 50rpx;
      padding: 0;
      position: inherit;
      background-color: transparent;
      text-align: center;
      border: none;
      align-items: flex-end;
      &:after {
        display: none;
      }
      &:before {
        display: none;
      }
      & .iconfont {
        font-size: 36rpx;
        color: #FF2424;
      }
    }
    /* 分享图片的弹窗 */
    & .share-popup {
      .custom-popup-class {
        .custom-ani-class {
          width: 76.8%;
          max-width: 80%;
        }
        .wux-popup__content {
          border-radius: 0rpx;
          background-color: transparent;
        }
      }
      .wux-popup-position.wux-popup-position--center .wux-popup__hd {
        padding: 0;
      }
      .wux-popup-position.wux-popup-position--center .wux-popup__bd {
        padding: 0;
      }
      & .pic-box {
        width: 100%;
      }
      .close-btn-box {
        width: 100%;
        height: 50rpx;
        & .iconfont {
          font-size: 48rpx;
          font-weight: bold;
          color: #fff;
        }
      }
    }
    /* 佣金规则弹窗 */
    .rule-popup-class {
      .custom-ani-class {
        width: 74.6%;
        max-width: 80%;
      }
      .wux-popup__content {
        border-radius: 10rpx;
      }
    }
    .rule-cont{
      margin-top: -0.7em;
      & .pup-title{
    font-weight: bold;
        color: #333;
        font-size: 36rpx;
        line-height: 1.5;
      }
      & .rule-list{
        margin-top: 15rpx;
        & .rule-item {
          font-size: 30rpx;
          line-height: 1.5;
          text-align: left;
          color: #666;
        }
      }
    }
  }
}